地图组件，如何根据数值自定义区块颜色？

问题描述

类似 vchart 这样的填充地图，怎么能自定义区块颜色的规则？示例里的配置不太符合我的需求。我希望当值在某个区间，显示一个指定的颜色。

解决方案

在 VChart 中，可以通过地图图元样式配置中，填充色（fill）的回调函数来实现你的需求，类似：

const colorGroup = [
  {
    range: [1, 100],
    color: 'rgb(252,250,97)'
  },
  {
    range: [101, 200],
    color: 'rgb(252,150,134)'
  },
  {
    range: [201, 300],
    color: 'rgb(87,33,15)'
  }
];

area: {
  style: {
    fill: datum => {
      const res = colorGroup.find(item => item.range[0] <= +datum.value && item.range[1] >= +datum.value);
      return res ? res.color : 'WhiteSmoke';
    };
  }
}

代码示例

相关文档

• 更多 demo
• 地图教程
• 相关 api
• github